﻿<div class="view flex flex-direction-column scrollFrameY flex-grow" data-bindheader="true" data-centerfocus="true" data-controller="__plugin/BangumiJS" data-forcescrollbar="true" data-horizontal="false" data-require="emby-select,emby-input,emby-checkbox,emby-button,material-icons" data-title="Bangumi" id="bangumiConfigurationPage" is="emby-scroller">
    <div
        class="scrollSlider flex-grow flex-direction-column padded-left padded-left-page padded-right padded-top-page padded-bottom-page">

        <style>
            #bangumi-oauth-container {
                margin-bottom: 32px;
            }

            #bangumi-oauth-container .bangumi-user-info,
            #bangumi-oauth-container .bangumi-oauth-status {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                padding: 12px;
                margin-bottom: 16px;
            }

            #bangumi-oauth-container .user-info {
                display: flex;
                align-items: center;
                flex-direction: row;
                line-height: 48px;
            }

            #bangumi-oauth-container .user-avatar {
                background-color: #202020;
                height: 48px;
                width: 48px;
                margin-right: 8px;
                text-align: center;
                border-radius: 50%;
                overflow: hidden;
            }

            #bangumi-oauth-container .user-avatar img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            #bangumi-oauth-container .user-name {
                flex: 1;
            }

            #bangumi-oauth-container .profile-link {
                display: block;
                width: 48px;
                height: 48px;
                padding: 0;
                line-height: 48px;
            }

            #bangumi-oauth-container .bangumi-oauth-status:empty {
                display: none;
            }

            #bangumi-oauth-container .bangumi-oauth-status p {
                display: flex;
                margin: 0 8px;
                line-height: 42px;
            }

            #bangumi-oauth-container .bangumi-oauth-status .material-icons {
                margin-right: 8px;
                vertical-align: middle;
            }

            #bangumi-oauth-container .emby-button {
                margin: 0 12px 0 0;
            }

            #bangumi-oauth-container .material-icons {
                line-height: inherit;
            }
        </style>
        <div>
            <form id="bangumiConfigurationForm">
                <div class="verticalSection verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h2 class="sectionTitle">账号授权</h2>
                    </div>
                </div>
                <div id="bangumi-oauth-container">
                    <div class="bangumi-user-info">
                        <div class="user-info">
                            <div class="user-avatar">
                                <span class="material-icons person"></span>
                            </div>
                            <div class="user-name">未登录</div>
                            <a class="profile-link fab" href="https://bgm.tv/" target="_blank">
                                <i class="md-icon">open_in_new</i>
                            </a>
                        </div>
                    </div>
                    <div class="bangumi-oauth-status"></div>
                    <button class="raised emby-button" id="bangumi-oauth-refresh" is="emby-button" style="display: none" type="button">
                        <span>延长授权时间</span>
                    </button>
                    <button class="raised emby-button" id="bangumi-oauth-btn" is="emby-button" type="button">
                        <span>授权登录 Bangumi</span>
                    </button>
                    <button class="raised emby-button" id="bangumi-oauth-delete" is="emby-button" style="display: none" type="button">
                        <span>取消授权</span>
                    </button>
                </div>
                <div class="selectContainer">
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label class="emby-checkbox-label">
                            <input id="ReportPlaybackStatusToBangumi" is="emby-checkbox" type="checkbox"/>
                            <span>同步播放进度到 Bangumi</span>
                        </label>
                    </div>
                </div>
                <div class="selectContainer">
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label class="emby-checkbox-label">
                            <input id="ReportManualStatusChangeToBangumi" is="emby-checkbox" type="checkbox"/>
                            <span>同步手动更新后的播放状态到 Bangumi</span>
                        </label>
                    </div>
                </div>
                <div class="selectContainer">
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label class="emby-checkbox-label">
                            <input id="SkipNSFWPlaybackReport" is="emby-checkbox" type="checkbox"/>
                            <span>忽略被标记为 NSFW 的内容</span>
                        </label>
                    </div>
                </div>
                <div class="verticalSection verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h2 class="sectionTitle">网络</h2>
                    </div>
                </div>
                <div class="selectContainer">
                    <select id="RequestTimeout" is="emby-select" label="请求超时时间">
                        <option value="5000">5 秒</option>
                        <option value="10000">10 秒</option>
                        <option value="30000">30 秒</option>
                        <option value="60000">1 分钟</option>
                    </select>
                </div>
                <div class="verticalSection verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h2 class="sectionTitle">元数据</h2>
                    </div>
                </div>
                <div class="selectContainer">
                    <select id="TranslationPreference" is="emby-select" label="标题翻译">
                        <option value="Original">优先使用日文</option>
                        <option value="Chinese">优先使用中文翻译</option>
                    </select>
                </div>
                <div class="selectContainer">
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label class="emby-checkbox-label">
                            <input id="UseBangumiSeasonTitle" is="emby-checkbox" type="checkbox"/>
                            <span>使用 Bangumi 词条作为季名称</span>
                        </label>
                    </div>
                </div>
                <!-- <div class="selectContainer">
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label class="emby-checkbox-label">
                            <input id="AlwaysReplaceEpisodeNumber" is="emby-checkbox" type="checkbox" />
                            <span>始终根据文件名猜测集数</span>
                        </label>
                    </div>
                </div> -->
                <div class="selectContainer">
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label class="emby-checkbox-label">
                            <input id="TrustExistedBangumiId" is="emby-checkbox" type="checkbox"/>
                            <span>始终根据配置的 Bangumi ID 获取元数据</span>
                        </label>
                    </div>
                </div>
                <div class="selectContainer">
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label class="emby-checkbox-label">
                            <input id="UseTestingSearchApi" is="emby-checkbox" type="checkbox"/>
                            <span>使用测试版 Bangumi 搜索接口</span>
                        </label>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
